<template>
  <view class="handle-content flex-start-center" @click="openPopup">
    <view class="icon-count">
      <image src="@/static/img/busiImgs/btn_car_bottom.png"></image>
      <view class="count">{{ cartCount }}</view>
    </view>
    <view class="desc">待添加{{ cartCount }}项</view>
    <eui-button
        type="primary"
        title="添加"
        @click.stop="addGoods"
        style="width: 220rpx; margin-left: auto; margin-right: 0; border-radius: 20rpx;"
    ></eui-button>

    <eui-popup
        background-color="#F2F3F5"
        ref="popupRef"
        :type="popupType"
        :mask-click="false"
        @change="change"
    >
      <view class="popup-content">
        <view class="popup-title">
          <view class="popup-cancel" @tap="closePopup">
            <eui-icons type="closeempty" size="20" color="#888888"/>
          </view>
        </view>
        <scroll-view scroll-y class="popup-default-content">
          <eui-swipe-action>
            <view
                :ref="'goodItem' + index"
                v-for="(item, index) in cartList"
                :key="index"
            >
              <eui-swipe-actionitem
                  :ref="`swipeActionItem${index}`"
                  :right-options="options"
                  show="none"
                  :auto-close="true"
                  @change="change"
              >
                <good-item
                    :good-item="item"
                ></good-item>
                <template v-slot:right>
                  <view class="delete-btn flex-row-center" @click="removeFromCart(item.c_gcode)">
                    <image src="@/static/img/busiImgs/btn_delete_wares.png"></image>
                  </view>
                </template>
              </eui-swipe-actionitem>
            </view>
          </eui-swipe-action>
        </scroll-view>
      </view>
    </eui-popup>
  </view>
</template>

<script setup lang="ts">
import {defineProps, ref} from 'vue';
import goodItem from './goodItem.vue';
import {useReceiptStore} from '@/store/useReceiptStore';
import {storeToRefs} from 'pinia';

const receiptStore = useReceiptStore();
const {cartList} = storeToRefs(receiptStore);
const {cartCount, totalQtty} = storeToRefs(receiptStore);

import { useCommonPage } from '../hooks/useCommonPage';
const { checkRouteAndNavigate } = useCommonPage();

const popupRef = ref(null);
const popupType = ref('bottom');

const change = (e, index) => {
  console.log('swiper', e, index);
}

const removeFromCart = (c_gcode: string) => {
  receiptStore.removeFromCart(c_gcode);
}

const openPopup = () => {
  popupRef.value.open(popupType.value);
};

const closePopup = () => {
  popupRef.value.close(popupType.value);
}

const addGoods = () => {
  checkRouteAndNavigate('pages/BusiViews/StoreTransfer/detail');
}
</script>


<style scoped lang="scss">
//底部处理区域
.handle-content {
  width: 100%;
  height: 130rpx;
  padding: 0 20rpx 0 40rpx;
  box-sizing: border-box;
  background: #ffffff;

  .icon-count {
    position: relative;
    width: 140rpx;
    height: 90rpx;

    image {
      width: 140rpx;
      height: 90rpx;
    }

    .count {
      min-width: 40rpx;
      position: absolute;
      top: -4rpx;
      right: 0;
      font-size: 26rpx;
      text-align: center;
      color: #ffffff;
      line-height: 40rpx;
      background: #f56c6c;
      border: 2rpx solid #ffffff;
      border-radius: 50%;
    }
  }

  .desc {
    margin-left: 30rpx;
    font-size: 30rpx;
    text-align: center;
    color: #333333;
    line-height: 38rpx;
  }


  .popup-title {
    width: 100%;
    height: 84rpx;
    background: #F2F3F5;
    border-radius: 40rpx 40rpx 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
    font-size: 32rpx;
    line-height: 45rpx;
    text-align: center;
    position: relative;

    .popup-cancel {
      position: absolute;
      right: 32rpx;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .popup-default-content {
    width: 100%;
    height: 700rpx;
    padding: 0 20rpx;
    background: #F2F3F5;
    box-sizing: border-box;
  }

  //::v-deep .uni-transition{
  //  bottom: 130rpx!important;
  //}

  .delete-btn {
    width: 88rpx;
    height: 94%;
    background: #409eff;
    border-radius: 16rpx;

    image {
      width: 40rpx;
      height: 40rpx;
    }
  }

}
</style>
